<template>
    <div class="com_box goods_count">
        <div class="finace_title carrier_title">商品构成数据</div>
        <el-table :data="goodsList" class="com_table carrier_table" ref="straRef" @sort-change='sortChange'>
            <!-- <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                <img src="../../assets/img/null_icon.svg" alt="">
                <div class="font_13 color_03">暂无数据</div>
            </div> -->
            <el-table-column prop="name" label="商品" min-width="270">
                <template slot-scope="scope">
                    <div class="flexbox flexcenter car_goods">
                        <img :src="scope.row.product_image" alt="" class="goods_img">
                        <span class="user_name">{{scope.row.product_name}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="pay_amt" label="成交金额" sortable="custom">
                <template slot-scope="scope">
                    ￥{{scope.row.pay_amt}}
                </template>
            </el-table-column>
            <el-table-column prop="pay_amt_ratio" label="成交金额占比" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.pay_amt_ratio | keepTwoNum}}%
                </template>
            </el-table-column>
            <!-- <el-table-column prop="product_click_pay_pv_ratio" label="商品点击率-支付转化率" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.product_click_pay_pv_ratio | keepTwoNum}}%
                </template>
            </el-table-column> -->
        </el-table>
        <div class="car_page flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="goodsSizeChange" @current-change="goodsCurrentChange" :current-page="goodsInfo.page" :page-size="goodsInfo.limit" :page-sizes="[5, 50, 100, 200]" :total="goodsInfo.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props:['goodsList',"goodsInfo"],
    name: "",
    data() {
        return {
            
        };
    },
    created() {},
    methods: {
        // 表格排序
        sortChange(column) {
            this.goodsInfo.order_types = "";
            this.goodsInfo.order_field = "";
            if (!column.order) {
                this.goodsInfo.page = 1
                this.$emit("getGoodsData")
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.goodsInfo.order_types = order;
            this.goodsInfo.order_field = column.prop;
            this.goodsInfo.page = 1
            this.$emit("getGoodsData")
        },


        goodsSizeChange(val){
            this.goodsInfo.limit = val
            this.goodsInfo.page = 1
            this.$emit("getGoodsData")
        },

        goodsCurrentChange(val){
            this.goodsInfo.page = val
            this.$emit("getGoodsData")
        },
    },
    components: {},
};
</script>


<style scoped>
.finace_title {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
    line-height: 22px;
}
.user_name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 14px;
    color: #17233d;
    height: 20px;
    line-height: 20px;
    margin-left: 8px;
}
.carrier_table {
    margin-top: 16px;
}
.car_page {
    margin-top: 20px;
}

.goods_count {
    margin-top: 16px;
    padding: 20px 16px;
    overflow: hidden;
}
.goods_count .finace_title {
    margin-top: 0;
}
.car_goods .goods_img {
    width: 55px;
    height: 55px;
}
</style>
